::selection {
    background:  var(--bs-cyan);
    color: black;
    font-weight: 900;
    /* font-size: 23px; */
  }
  .bfl::first-letter {
    /* color: #ff0000; */
    font-size: 200%;
  }
.navbar {
    .nav-item .nav-link {
        color: var(--bs-body-color);
        opacity: 0.55;
        &:hover,
        &:focus {
            opacity: 1;
        }
    }

    /* < temp */
    .navbar-brand {
        color: var(--bs-body-color);
        opacity: 1;
    }

}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
html,
body {
    margin: 0;
    font: 1em sans-serif;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}
*{
    transition: all .5s ease-in-out;
    /* margin: 5px; */
}
.hide{
    display:none;
}
.m5{
    margin: 5px;
}

footer {
    max-width: 100vw;
    box-sizing: border-box;
    margin: 5px 7px 2px 9px;
}

.area-box {
    max-width: calc(100vw - 10px);
    max-width: 600px;
    width: calc(100vw - 250px);
    overflow-wrap: break-word;
    overflow-y: hidden;
    border-radius: 10px;
    margin: 0 auto;
    font-family: monospace;
    min-width: 300px;
    padding-bottom: 10px;
}

.bottomFootRedirect {
    display: block;
    background: #8888;
    margin: 0 auto;
    padding: 15px;
    color: white;
    font-weight: 1000;
    font-family: monospace, cursive, Georgia, 'Times New Roman', Times, serif;
    text-decoration: none;
    text-shadow: 2px 2px 1px #fff8;
    transform: scale(1.5);
    border-radius: 20px;
    max-width: 100vw;
}

/* < primary color */
.priC {
    padding: 10px;
    background: var(--boxbg);
    border: cyan 3px solid;
    font-size: 120%;
    color: var(--boxc);
    margin-bottom: 10px;
}

/* < min screen for phones */
@media (max-width : 320px) {
    body>* {
        font-size: 50%;
    }
}

/* < only for phone */
@media (orientation : portrait) and (max-width:720px) {
    .area-box {
        margin: 5vw;
        width: 90vw;
    }
}

/* < for dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        /* own */
        --boxP: cyan;
        --boxc: #004848;
        --highlight-c: cyan;
        --highlight-bg: darkcyan;
        --boxbg: var(--boxP);
        /* bs */
        --bs-body-color: rgb(255, 255, 255);
        --bs-white-rgb: 32, 32, 32;
        --bs-light-rgb: 40, 40, 40;
        --bs-dark-rgb: 255, 255, 255;
        --bs-border-color: grey;
        --bs-body-bg: rgb(40, 40, 40);
        --bs-black-rgb: 0, 0, 0;
        --bs-body-color-rgb: 255, 255, 255;
        --bs-body-bg-rgb: 40, 40, 40;
        --bs-body-font-weight: 600;
    }
}


:root {
    /* own variables */
    --boxP: lightcyan;
    --boxc: black;
    --boxbg: var(--boxP);
    --highlight-c: darkcyan;
    --highlight-bg: cyan;
    /* bs */
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
}